<template>
  <div class="ex-overview-header">
    <div class="ex-header-brand inline" @click="turnTo"><span>EXEED</span><span
        class="ex-header-brand-new">Newsroom</span>
    </div>
    <!-- <div class="ex-header-brand-title inline">Newsroom</div> -->
    <div class="ex-header-brand-logo inline"><img src="/images/logo.png" alt="logo"></div>
    <div v-if="isShow" class="ex-header-brand-search inline">
      <div class="ex-header-brand-search-wrapper">
        <input type="text" v-model="searchText" placeholder="Search">
      </div>
      <img src="/images/search.png" alt="search" @click="search">
    </div>
  </div>
</template>
<script setup lang="ts">
const config = useRuntimeConfig();
const hostURL = config.public.hostURL;
const router = useRouter();

let searchText = ''
const turnTo = () => {
  router.push({
    path: `/`
  })
}
const search = () => {
  router.push({
    path: `/search`, query: {type: 0, key: searchText}
  })
}

const route = useRoute();
const isShow = ref(true);
if (route.path.indexOf("search") != -1) {
  isShow.value = false;
}
watch(() => route.path, (newPath, oldPath) => {
  if (newPath.indexOf("search") == -1) {
    isShow.value = true;
  } else {
    isShow.value = false;
  }
});

</script>
<style scoped lang="scss">
.ex-overview-header {
  position: relative;
  width: 1920px;
  // min-width: 1200px;
  height: 96px;
  background: #372E2C;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
  //position: fixed;
  z-index: 999;
  display: inline-flex;
  align-items: center;

  .ex-header-brand {;
    cursor: pointer;
    user-select: none;
    width: 70px;
    // height: 20px;
    font-weight: 400;
    font-size: 18px;
    color: #c78e66;
    line-height: 15px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 160px;

    .ex-header-brand-new {
      margin-left: 10px;
      font-size: 18px;
      color: #ffffff;
    }
  }

  .ex-header-brand-title {
    width: 104px;
    height: 96px;
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 96px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .ex-header-brand-logo {
    position: absolute;
    left: 866px;
    height: 96px;
    top: 25px;
    // transform: translate(-50%, -50%);
    img {
      position: relative;
      // width: 190px;
      // height: 100;
      height: 40px;
    }
  }


  .ex-header-brand-search {
    position: absolute;
    right: 160px;
    top: 30px;
    display: inline-flex;
    // transform: translateY(-50%);、

    .ex-header-brand-search-wrapper {
      padding-bottom: 8px;
      width: 400px;
      border-bottom: 1px solid #FFFFFF;
      display: flex;
      align-items: center;
      /* 垂直居中所有子元素 */
      justify-content: start;
      margin-right: 10px;

      input {
        border: none;
        /* 移除边框 */
        outline: none;
        /* 在选中时移除轮廓线 */
        background-color: transparent;
        /* 设置背景色为透明 */
        caret-color: #ffffff;
        /* 字体大小 */
        font-size: 14px;
        color: #FFFFFF;
      }

      input::-webkit-input-placeholder {
        font: 14px
      }
    }

    /* 子元素向行的起始位置对齐 */
    img {
      cursor: pointer;
      margin-right: 7px;
      width: 35px;
    }
  }

}
</style>
